<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<link rel="stylesheet" href="dist/css/bootstrapValidator.css"/>
		<script src="" type="text/javascript" charset="utf-8"></script>
		<script src="dist/js/bootstrapValidator.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.container{
				/*background-color: lightblue;*/
			}
			form{
				width: 800px;
				margin: 0 auto;
			}
			form span{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div id="row">
				<div class="col-md-12">
					<h3 class="text-center">预约产品演示</h3>
				</div>
			</div>
			<div id="row">
				<div class="col-md-12">
					<p class="text-center">请完善以下信息，我们的顾问会在1个工作日内与您联系，为您安排产品演示服务。(仅对企业客户开放)</p>
				</div>
			</div>
			<form action="" method="post" class="form-horizontal" id="defaultForm">
				<div class="form-group">
					<label for="exampleInputEmail1"><span>*</span> 想了解的产品</label>
    				<select class="form-control" >
					  <option>请输入你想了解的图片</option>
					  <option>2</option>
					  <option>3</option>
					  <option>4</option>
					  <option>5</option>
					</select>
				</div>

				<div class="form-group">
					<label for="cname"><span>*</span> 姓名</label>
					<input type="text" class="form-control" id="cname" placeholder="请输入您的姓名" name="cname">
				</div>
				
				<div class="form-group">
					<label for="cphone"><span>*</span> 手机号码</label>
					<input type="text" class="form-control" id="cphone" placeholder="请输入手机号码" name="cphone">
				</div>
				<div class="form-group">
					<label for="code"><span>*</span> 验证码</label>
				</div>
				<div class="form-group">
					<div class="col-md-10">
						<input type="text" class="form-control" id="code" placeholder="请输入验证码">
					</div>
					<div class="col-md-2">
						<button class="btn btn-primary ">验证码</button>
					</div>
				</div>
				<div class="form-group">
					<label for="cemail"><span>*</span> 邮箱</label>
					<input type="email" class="form-control" id="cemail" placeholder="请输入邮箱" name="cemail">
				</div>
				<div class="form-group">
					<label for="cbname"><span>*</span> 公司名称</label>
					<input type="text" class="form-control" id="cbname" placeholder="请输入公司名称" name="cbname">
				</div>
				<div class="form-group">
					<label for="cbscale"><span>*</span> 公司规模</label>
					<select class="form-control" id="cbscale">
					  <option>500人以下</option>
					  <option>2</option>
					  <option>3</option>
					  <option>4</option>
					  <option>5</option>
					</select>
				</div>
				<div class="form-group">
					<label for="job"><span>*</span> 公司职务</label>
					<select class="form-control" id="job">
					  <option>总经理</option>
					  <option>2</option>
					  <option>3</option>
					  <option>4</option>
					  <option>5</option>
					</select>
				</div>
				<div class="form-group">
					<label for="comm">备注</label>
					<textarea class="form-control" rows="3" id="comm"></textarea>
				</div>
				
				<div class="form-group">
					
					<div class="col-md-12">
						<button type="button" class="btn btn-primary btn-lg btn-block" id="validateBtn">预约产品展示</button>
					</div>
				</div>
				<div class="form-group text-center">
					<label>
					      <input type="checkbox" name="agreement"> 预约产品即代表演示 <a href="">《隐私保护协议》</a>
					</label>
				</div>
			</form>	
				<script type="text/javascript">
					$(document).ready(function() {
							$('#defaultForm').bootstrapValidator({
								 message: 'This value is not valid',
								 feedbackIcons: {
					             valid: 'glyphicon glyphicon-ok',
					             invalid: 'glyphicon glyphicon-remove',
					             validating: 'glyphicon glyphicon-refresh'
						         },
						         fields: {
						         	cname: {
								               validators: {
								                   notEmpty: {
								                       message: '姓名不能为空'
								                   },
								                   stringLength: {
								                        min: 6,
								                        max: 30,
								                        message: '用户名长度必须大于6个字符且小于30个字符'
								                    },
								                    regexp: {
								                        regexp: /^[a-zA-Z0-9_\.]+$/,
								                        message: '用户名只能由字母、数字、点和下划线组成'
								                    }
								               }
								      },
								      cphone:{
								      	 validators: {
								                   notEmpty: {
								                       message: '手机号码不能为空'
								                   },
								                   regexp:{
								                   		regexp: /^[0-9]{11}$/,
								                   		message: '手机号码为11位'
								                   }
								      	 }
						         	  },
						         	  cemail:{
						         	  	validators: {
								                   notEmpty: {
								                       message: '邮箱不能为空'
								                   },
								                   regexp:{
								                   		regexp: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
								                   		message: '邮箱格式不正确'
								                   }
								      	 }
						         	  		
						         	  },
						         	  cbname:{
						         	  	validators: {
								                   notEmpty: {
								                       message: '公司名称不能为空'
								                   }
								      	 }
						         	  },
						         	  agreement:{
						         	  	validators: {
								                   notEmpty: {
								                       message: '必须勾选不能为空'
								                   }
								      	 }
						         	  	
						         	  }
						         	  
							    }
							})
					});
							//表单提交
							 $('#validateBtn').click(function() {
						         $('#defaultForm').bootstrapValidator('validate');
						     });
				</script>
			
		</div>
	</body>
</html>
